<template>
	<container class="container" better-scroll>
		<div class="page-header">
			<span id="historyEchartId" class="title-item historyEchartId">烟气历史监测数据查询</span>
		</div>
		<div class="page-body">
			<div class="page-main">
				<div class="page-condition">
					<a-form layout="inline" :form="form" @submit="handleSubmit">
						<a-row>
							<a-col :offset="1">
								<a-form-item label="监测地点" labelAlign="right">
									<a-select class="watch-address" default-value="南京测绘勘测院">
										<a-select-option value="南京测绘勘测院">
											南京测绘勘测院
										</a-select-option>
										<a-select-option value="等于">
											等于
										</a-select-option>
										<a-select-option value="小于">
											小于
										</a-select-option>
									</a-select>
								</a-form-item>
								<a-form-item label="时间段" labelAlign="right">
									<a-date-picker v-model="startValue" :disabled-date="disabledStartDate" show-time format="YYYY-MM-DD HH:mm:ss"
									 placeholder="开始时间" @openChange="handleStartOpenChange" />
									<span class="block-text">-</span>
									<a-date-picker v-model="endValue" :disabled-date="disabledEndDate" show-time format="YYYY-MM-DD HH:mm:ss"
									 placeholder="结束时间" :open="endOpen" @openChange="handleEndOpenChange" />
								</a-form-item>
								<a-button class="select-btn">查询</a-button>
								<a-button class="select-btn">切换图表</a-button>
								<span class="download-btn"></span>
							</a-col>
						</a-row>
					</a-form>
				</div>
				<div class="linechart">
					<div id="historyDataId"></div>
				</div>
			</div>
		</div>
	</container>
</template>

<script>
	import echarts from 'echarts';
	import moment from 'moment';
	import 'moment/locale/zh-cn';
	export default {
		name: "echart",
		data() {
			return {
				form: this.$form.createForm(this, {
					name: 'horizontal_login'
				}),
				moment,
				startValue: null,
				endValue: null,
				endOpen: false,
				echartOptions: {
					title: {
						left: '5%',
						text: '监测因子',
						textStyle: {
							color: "#bebebe",
							fontSize: '15',
						}
					},
					//提示框组件
					tooltip: {
						trigger: 'axis',
						show: true,
						axisPointer: {
							lineStyle: {
								color: '#207064',
							}
						}
					},
					grid: {
						left: 90,
					},
					legend: {
						data: ['COD', 'TOC', '氨氮', '硝酸盐', 'PH'],
						show: true,
						left: "10%",
						//图例项的 icon
						icon: "circle",
						textStyle: {
							color: "#bebebe",
						}
					},
					xAxis: {
						data: ['2020-06-09-12-00', '2020-06-09-12-00', '2020-06-09-12-00', '2020-06-09-12-00', '2020-06-09-12-00',
							'2020-06-09-12-00', '2020-06-09-12-00', '2020-06-09-12-00', '2020-06-09-12-00', '2020-06-09-12-00',
							'2020-06-09-12-00', '2020-06-09-12-00'
						],
						axisLine: {
							lineStyle: {
								color: '#207064',
								// type: "dotted",
								// shadowOffsetY:-16,
							},
						},
						//x轴坐标的旋转
						axisLabel: {
							rotate: 45,
						}
					},
					yAxis: {
						//y轴字体颜色
						axisLabel: {
							color: '#207064'
						},
						dataMax: 42,
						splitLine: {
							show: true,
							//设置y轴的坐标轴刻度设置为虚线和颜色
							lineStyle: {
								type: 'dashed',
								color: '#207064',
							}
						},
						//y轴颜色
						axisLine: {
							lineStyle: {
								color: '#207064',
							}
						}
					},
					series: [{
						name: 'COD',
						type: 'line',
						// name:'COD' ,'TOC','氨氮''硝酸盐''PH',
						symbol: 'rect',
						symbolSize: 10,
						data: [20, 30, 34, 25,
							{
								value: 15,
								symbol: "rect",
								itemStyle: {
									// 点的颜色
									color: 'red'
								}
							},
							29, 38,
							{
								value: 44,
								symbol: "rect",
								itemStyle: {
									// 点的颜色
									color: 'red'
								}
							},
							34, 34, 25, 33
						],
						//平滑曲线
						smooth: true,
						// 普通样式
						itemStyle: {
							// 点的颜色
							color: '#207064'
						},
						markLine: {
							// value:16,
							symbol: "none",
							data: [{
								name: '最小值',
								yAxis: 16,
								// symbol:"rect",
								label: {
									show: true,
									position: "end",
									formatter: '最大值',
								},
								lineStyle: {
									color: '#9fb043',
									shadowColor: 'rgba(0, 0, 0, 0.5)',
									shadowBlur: 6,
									// symbol: 'rect',
								}
							}, {
								name: '最大值',
								yAxis: 42,
								// symbol: 'circle',
								label: {
									show: true,
									position: 'end',
									formatter: '42',
								},
								lineStyle: {
									color: '#9fb043',
								}
							}],
						},
						markArea: {
							// label:{backgroundColor:'red'},
							data: [
								[{
									// name: '最大值',
									yAxis: 42,
									//设置阴影部分的颜色
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: 80,
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}],
								[{
									// name: '最小值',
									yAxis: 0,
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: 16,
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}]
							]
						}
					}, {
						name: 'TOC',
						type: 'line',
						// name:'COD' ,'TOC','氨氮''硝酸盐''PH',
						symbol: 'rect',
						symbolSize: 10,
						data: [20, 30, 34, 25, 15, 29, 38, 44, 34, 34, 25, 33],
						//平滑曲线
						smooth: true,
						// 普通样式
						itemStyle: {
							// 点的颜色
							color: '#207064'
						},
						markLine: {
							symbol: "none",
							data: [{
								yAxis: 16,
								label: {
									show: true,
									position: 'start',
									formatter: '16',
									symbol: 'none',
								},
								lineStyle: {
									color: '#9fb043',
									shadowColor: 'rgba(0, 0, 0, 0.5)',
									shadowBlur: 6,
								}
							}, {
								yAxis: 42,
								symbol: 'none',
								label: {
									show: true,
									position: 'start',
									formatter: '42',
									symbol: 'none',
								},
								lineStyle: {
									color: '#9fb043',
								}
							}],
						},
						markArea: {
							// label:{backgroundColor:'red'},
							data: [
								[{
									yAxis: '42',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: '80',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}],
								[{
									yAxis: '0',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: '16',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}]
							]
						}
					}, {
						name: '氨氮',
						type: 'line',
						// name:'COD' ,'TOC','氨氮''硝酸盐''PH',
						symbol: 'rect',
						symbolSize: 10,
						data: [20, 30, 34, 25, 15, 29, 38, 44, 34, 34, 25, 33],
						//平滑曲线
						smooth: true,
						// 普通样式
						itemStyle: {
							// 点的颜色
							color: '#207064'
						},
						markLine: {
							symbol: "none",
							data: [{
								yAxis: 16,
								label: {
									show: true,
									position: 'start',
									formatter: '16',
									symbol: 'none',
								},
								lineStyle: {
									color: '#9fb043',
									shadowColor: 'rgba(0, 0, 0, 0.5)',
									shadowBlur: 6,
								}
							}, {
								yAxis: 42,
								symbol: 'none',
								label: {
									show: true,
									position: 'start',
									formatter: '42',
									symbol: 'none',
								},
								lineStyle: {
									color: '#9fb043',
								}
							}],
						},
						markArea: {
							// label:{backgroundColor:'red'},
							data: [
								[{
									yAxis: '42',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: '80',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}],
								[{
									yAxis: '0',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: '16',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}]
							]
						}
					}, {
						name: '硝酸盐',
						type: 'line',
						// name:'COD' ,'TOC','氨氮''硝酸盐''PH',
						symbol: 'rect',
						symbolSize: 10,
						data: [20, 30, 34, 25, 15, 29, 38, 44, 34, 34, 25, 33],
						//平滑曲线
						smooth: true,
						// 普通样式
						itemStyle: {
							// 点的颜色
							color: '#207064'
						},
						markLine: {
							symbol: "none",
							data: [{
								yAxis: 16,
								label: {
									show: true,
									position: 'start',
									formatter: '16',
									symbol: 'none',
								},
								lineStyle: {
									color: '#9fb043',
									shadowColor: 'rgba(0, 0, 0, 0.5)',
									shadowBlur: 6,
								}
							}, {
								yAxis: 42,
								symbol: 'none',
								label: {
									show: true,
									position: 'start',
									formatter: '42',
									symbol: 'none',
								},
								lineStyle: {
									color: '#9fb043',
								}
							}],
						},
						markArea: {
							// label:{backgroundColor:'red'},
							data: [
								[{
									yAxis: '42',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: '80',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}],
								[{
									yAxis: '0',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: '16',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}]
							]
						}
					}, {
						name: 'PH',
						type: 'line',
						// name:'COD' ,'TOC','氨氮''硝酸盐''PH',
						symbol: 'rect',
						symbolSize: 10,
						data: [20, 30, 34, 25, 15, 29, 38, 44, 34, 34, 25, 33],
						//平滑曲线
						smooth: true,
						// 普通样式
						itemStyle: {
							// 点的颜色
							color: '#207064'
						},
						markLine: {
							symbol: "none",
							data: [{
								yAxis: 16,
								label: {
									show: true,
									position: 'start',
									formatter: '16',
									symbol: 'none',
								},
								lineStyle: {
									color: '#9fb043',
									shadowColor: 'rgba(0, 0, 0, 0.5)',
									shadowBlur: 6,
								}
							}, {
								yAxis: 42,
								symbol: 'none',
								label: {
									show: true,
									position: 'start',
									formatter: '42',
									symbol: 'none',
								},
								lineStyle: {
									color: '#9fb043',
								}
							}],
						},
						markArea: {
							// label:{backgroundColor:'red'},
							data: [
								[{
									yAxis: '42',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: '80',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}],
								[{
									yAxis: '0',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}, {
									yAxis: '16',
									itemStyle: {
										color: "rgba(128, 128, 128, 0.2)"
									}
								}]
							]
						}
					}],
				}
			}
		},
		watch: {
			startValue(val) {
				console.log('startValue', val);
			},
			endValue(val) {
				console.log('endValue', val);
			},
			pageSize(val) {
				console.log('pageSize', val);
			},
			current(val) {
				console.log('current', val);
			}
		},
		methods: {
			onShowSizeChange(current, pageSize) {
				console.log(current, pageSize);
			},
			disabledStartDate(startValue) {
				const endValue = this.endValue;
				if (!startValue || !endValue) {
					return false;
				}
				return startValue.valueOf() > endValue.valueOf();
			},
			disabledEndDate(endValue) {
				const startValue = this.startValue;
				if (!endValue || !startValue) {
					return false;
				}
				return startValue.valueOf() >= endValue.valueOf();
			},
			handleStartOpenChange(open) {
				if (!open) {
					this.endOpen = true;
				}
			},
			handleEndOpenChange(open) {
				this.endOpen = open;
			},
			handleSubmit() {

			},
			onCheckboxChange(e) {
				console.log('current', e);
			}
		},
		mounted() {
			// 基于准备好的dom，初始化echarts实例
			let echartsMain = document.getElementById("historyDataId");
			let echartsData = echarts.init(echartsMain);
			echartsData.setOption(this.echartOptions);

			this.$nextTick(() => {
				this.form.validateFields();
			});
		},
	}
</script>

<style scoped src="../../../assets/style/pollution.css"></style>
<style scoped src="../../../assets/style/pollution/historyData.css"></style>
<style scoped>
	::v-deep .ant-form-item-control {
		display: inline-block;
	}

	::v-deep .ant-form-item-label label {
		color: #9fb043;
		font-size: 18px;
	}

	::v-deep .ant-form-item-control-wrapper,
	::v-deep .ant-form-item {
		width: auto;
	}

	::v-deep .ant-form-inline .ant-form-item {
		margin-top: 0px;
	}

	::v-deep .ant-pagination-item,
	::v-deep .ant-select-selection {
		background-color: #1e3230;
		border: none;
	}

	::v-deep .ant-pagination-item a,
	::v-deep .ant-select-arrow,
	::v-deep .ant-select-selection__rendered {
		color: #bebebe;
	}

	::v-deep .ant-pagination-prev .ant-pagination-item-link,
	::v-deep .ant-pagination-next .ant-pagination-item-link {
		background-color: #1e3230;
		border: none;
		color: #bebebe;
	}

	.historyEchartId {
		font-size: 24px;
		color: #37ddc0;
		padding: 6px 41px;
		line-height: 98px;
	}

	.pollutionSerch {
		float: right;
	}

	.changeEchat {
		float: left;
	}

	#historyDataId {
		height: 600px;
		width: 1600px;
	}
</style>
